<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	 <title>厂房地图设置</title>
    <style>

        .f_btn1{
            width: 100%;
        }
    </style>
    <%@ include file="head.jsp" %>
</head>
<body>
<div class="layui-row" style="height: auto;">
    <div class="layui-col-md9">
        <canvas id="mycanvas" width="861px" height="566px" style="border:1px solid #d3d3d3;"></canvas>
    </div>
    <div class="layui-col-md3" style=" border:1px solid #d3d3d3;padding: 10px;">

		<div class="layui-col-md12" style="height: 50px;">

            <button id="note_t" class="layui-btn f_btn1">画图须知</button>

        </div>
        <!--添加一个矩形-->
        <div class="layui-col-md12" style="height: 50px;">

            <button id="map_rect" class="layui-btn f_btn1">添加矩形</button>

        </div>
        <div class="layui-col-md12" style="height: 50px">
            <button id="map_circle" class="layui-btn f_btn1">添加圆形</button>
        </div>
        <div class="layui-col-md12" style="height: 50px">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <button id="deleteById" class="layui-btn f_btn1">撤销</button>
                </div>
                <div class="layui-col-md6">
                    <button id="deleteAll" class="layui-btn f_btn1">重置</button>
                </div>
            </div>

        </div>
        <div class="layui-col-md12" style="height: 40px;">
            <button id="submit1"  class="layui-btn f_btn1">下载地图</button>
        </div>
    </div>

</div>

<script>
    //JavaScript代码区域
    layui.use(['element','layer','form','table'],function(){
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
        
        
	    var user_name = "${sessionScope.user_name}" ;
        //alert(user_name) ;
		var paint1 = function(json){
	        //第一个实例
	        var canvas1 = $("#mycanvas")[0];
	        var ctx=canvas1.getContext("2d");
		        	
			
			var biao = 1 ;			//放大系数
			ctx.font="13px Arial";
			for(var i = 0 ; i < json.length ; i ++ ){
				if(json[i].eq_note == '厂房地图'){
					var eq_width = parseFloat(json[i].eq_width) ;
					var eq_length = parseFloat(json[i].eq_length) ;
					if(eq_width / eq_length > 1.53) {
						if(eq_width * biao > 800){
							while(eq_width * biao > 800){
								biao = biao - 0.05 ;
							}
						}else{
							while(eq_widht * biao < 800){
								biao = biao + 0.05 ;
							}
						}
					}else{
						if(eq_length * biao > 500){
							while(eq_length * biao > 800){
								biao = biao - 0.04 ;
							}
						}else{
							while(eq_length * biao < 800){
								biao = biao + 0.04 ;
							}
						}
					}
					break;
				}
			}
			
			for(var i = 0 ; i < json.length ; i ++){
			    var eq_length = parseFloat(json[i].eq_length) * biao ;
			    var map_x = parseFloat(json[i].map_x) * biao ;
			    var map_y = parseFloat(json[i].map_y) * biao ;
			    var eq_width = parseFloat(json[i].eq_width)* biao ;
				if(eq_length > 0){	//说明是矩形
					ctx.strokeRect(map_x,map_y,eq_width,eq_length) ; //将矩形画出来
					ctx.fillText(json[i].eq_name,map_x + 5,map_y + 20);
					
				}else{					//画圆形
			        ctx.beginPath();
			        ctx.arc(map_x,map_y,eq_width,0,2*Math.PI);
			        ctx.stroke();
			        ctx.closePath();
				}
			}
	        
        }
		
        var load1 = function(){
        	
			$.ajax({
				type : 'post',
				url  : 'showEq' ,
				success: function(data){
					var json = JSON.parse(data);
					paint1(json);
				}
			});
        }
        
		load1();		//刷新载入图画
		$("#note_t").click(function () {
            layer.open({
                type: 0,
                title: '画图须知',
                shadeClose: true,
                area: ['400px', '250px'],
                content: "画图时，如果是厂房地图的话不用在设置坐标点，只设置长和宽就行，但必须在备注上写上‘0’，" +
                    "如果是设备的话就标注‘1’，如果是监测点的话就标注‘2’。同时，画图时按原比例画就行，如：实际长为100M，就输入长100.厂房里的设备就按厂房地图左上角" +
                    "为原点，确定坐标。"
            })
        })
        
        $("#submit1").click(function () {
            layer.msg("保存成功") ;
        })
        
        $("#map_rect").click(function () {
        					
          layer.open({
              type:2 ,
              content:"addRect",
              title: "添加一个矩形",
              area: ['285px','500px'],
//              offset:['212px','863px'],
              offset:['70px','863px'],
              shade: ['0.1','#000'] ,
          })
          
        })

        $("#map_circle").click(function () {
            layer.open({
                type:2 ,
                content:"addCircle",
                title: "添加一个圆形",
                area: ['285px','500px'],
//              offset:['212px','863px'],
                offset:['110px','863px'],
                shade: ['0.1','#000'] ,

            })
        })
		
        $("#deleteById").click(function(){
        	
	        	$.post("deleteById_C",function(data){
	        		
	        		location.reload();
	        		
	        	})
        })
        
        $("#deleteAll").click(function(){
        	layer.open({
        		  content: '确定要重置吗？'
        		  ,btn: ['取消', '确定']
        		  ,yes: function(index, layero){
        			  layer.close(index);
        		  }
        		  ,btn2: function(index, layero){
        		    //按钮【按钮二】的回调
        		    $.post("deleteAll_C",function(data){
        		    	layer.close(index);
        				location.reload();
        		
        			})
        		    //return false 开启该代码可禁止点击该按钮关闭
        		  }
        		  ,cancel: function(){ 
        		    
        		  }
        	})
        
        });
    })
</script>
</body>
</html>